CSS Container Style Queries: Responzivní design založený na stylu pro globální aplikace

Tradiční responzivní design se silně opírá o media queries, které přizpůsobují rozložení a styly webové stránky na základě velikosti viewportu. Ačkoliv je tento přístup efektivní, může vést k nekonzistencím a potížím při práci se složitými komponentami, které se musí přizpůsobit různým kontextům v rámci stejného viewportu. CSS Container Style Queries nabízejí granulárnější a intuitivnější řešení, které umožňuje prvkům reagovat na stylování aplikované na jejich nadřazený prvek, což poskytuje skutečně komponentově založené responzivní chování.

Co jsou CSS Container Style Queries?

Container Style Queries rozšiřují sílu container queries za hranice jednoduchých podmínek založených na velikosti. Místo kontroly šířky nebo výšky kontejneru vám umožňují zkontrolovat přítomnost specifických CSS vlastností a hodnot aplikovaných na daný kontejner. To umožňuje komponentám přizpůsobit svůj styl kontextu kontejneru, nikoliv pouze jeho rozměrům.

Představte si to takto: místo abyste se ptali „Je viewport širší než 768px?“, můžete se zeptat „Má tento kontejner nastavenou vlastní vlastnost --theme: dark;?“. To otevírá zcela nový svět možností pro vytváření flexibilních a znovupoužitelných komponent, které se mohou bez problémů přizpůsobit různým tématům, rozložením nebo variantám značky napříč vaším webem nebo aplikací.

Výhody Container Style Queries

• Komponentově založená responzivita: Izolujte responzivitu v rámci jednotlivých komponent, čímž se stanou přenositelnějšími a znovupoužitelnými.
• Snížená složitost CSS: Vyhněte se příliš specifickým media queries, které cílí na konkrétní velikosti obrazovky.
• Zlepšená udržovatelnost: Změny ve stylování komponenty méně pravděpodobně ovlivní ostatní části webu.
• Témata a variace: Snadno vytvářejte různá témata nebo variace komponent na základě stylování jejich kontejneru. To je zvláště užitečné pro mezinárodní značky, které potřebují aplikovat různé směrnice pro branding v různých regionech.
• Vylepšená přístupnost: Přizpůsobení stylů komponent na základě kontextu kontejneru může zlepšit přístupnost poskytnutím vhodnějších vizuálních podnětů pro uživatele s postižením.
• Dynamické přizpůsobení obsahu: Komponenty mohou upravit své rozložení a prezentaci na základě typu obsahu, který obsahují. Představte si shrnutí novinového článku, které se přizpůsobí podle toho, zda obsahuje obrázek či nikoliv.

Jak používat CSS Container Style Queries

Zde je rozpis, jak implementovat container style queries:

1. Nastavení kontejneru

Nejprve musíte určit prvek jako kontejner. Můžete to udělat pomocí vlastnosti container-type:

            .container {
  container-type: inline-size;
}

            

              
                Copy
              
            
          

Hodnota inline-size je nejběžnější a nejužitečnější, protože umožňuje kontejneru dotazovat se na svou inline (horizontální) velikost. Můžete také použít size, která se dotazuje na inline i block velikost. Použití pouze size může mít dopad na výkon, pokud nebudete opatrní.

Alternativně můžete použít container-type: style pro použití kontejneru pouze pro dotazy na styl, nikoli na velikost, nebo container-type: size style pro použití obou. Pro kontrolu názvu kontejneru použijte container-name: my-container a poté na něj cílte pomocí @container my-container (...).

2. Definování dotazů на styl

Nyní můžete použít at-rule @container style() k definování stylů, které se použijí, když je splněna určitá podmínka:

            @container style(--theme: dark) {
  .component {
    background-color: #333;
    color: #fff;
  }
}

            

              
                Copy
              
            
          

V tomto příkladu se styly v rámci pravidla @container aplikují na prvek .component pouze v případě, že jeho nadřazený prvek má vlastní vlastnost --theme nastavenou na dark.

3. Aplikování stylů na kontejner

Nakonec musíte na prvek kontejneru aplikovat CSS vlastnosti, které vaše dotazy na styl kontrolují:

            <div class="container" style="--theme: dark;">
  <div class="component">This is a component. </div>
</div>

            

              
                Copy
              
            
          

V tomto příkladu bude mít .component tmavé pozadí a bílý text, protože jeho kontejner má styl --theme: dark; aplikovaný přímo v HTML (pro jednoduchost). Nejlepším postupem je aplikovat styly prostřednictvím CSS tříd. Můžete také použít JavaScript k dynamické změně stylů na kontejneru, což spustí aktualizace dotazů na styl.

Praktické příklady pro globální aplikace

1. Komponenty s tématy

Představte si webovou stránku, která podporuje více témat. Můžete použít container style queries k automatickému přizpůsobení stylů komponent na základě aktivního tématu.

            /* CSS */
.app-container {
  --theme: light;
}

@container style(--theme: dark) {
  .card {
    background-color: #333;
    color: #fff;
  }
}

@container style(--theme: light) {
  .card {
    background-color: #f0f0f0;
    color: #333;
  }
}

/* HTML */
<div class="app-container" style="--theme: dark;">
  <div class="card">
    <h2>Card Title</h2>
    <p>Card content.</p>
  </div>
</div>

            

              
                Copy
              
            
          

V tomto příkladu se komponenta .card automaticky přepne mezi tmavým a světlým tématem na základě vlastnosti --theme svého kontejneru. To je velmi přínosné pro weby, kde si uživatelé mohou vybrat různá témata podle svých preferencí.

2. Variace rozložení

Můžete použít container style queries k vytvoření různých variant rozložení pro komponenty na základě dostupného prostoru nebo celkového rozložení stránky. Zvažte komponentu pro výběr jazyka. V hlavní navigaci může být kompaktním rozbalovacím seznamem. V patičce by mohla být plným seznamem dostupných jazyků.

            /* CSS */
.navigation {
  --layout: compact;
}

.footer {
  --layout: expanded;
}

@container style(--layout: compact) {
  .language-selector {
    /* Styles for compact dropdown */
  }
}

@container style(--layout: expanded) {
  .language-selector {
    /* Styles for full list of languages */
  }
}

/* HTML */
<nav class="navigation" style="--layout: compact;">
  <div class="language-selector">...

<footer class="footer" style="--layout: expanded;">
  <div class="language-selector">...

            

              
                Copy
              
            
          

Tento přístup je cenný pro webové stránky, které se zaměřují na různá uživatelská rozhraní napříč různými zařízeními a platformami. Vezměte v úvahu, že struktury mobilních a desktopových stránek se často výrazně liší, a to může pomoci komponentám přizpůsobit se.

3. Přizpůsobení typu obsahu

Zvažte zpravodajský web se shrnutími článků. Můžete použít container style queries k úpravě prezentace shrnutí na základě toho, zda obsahují obrázek či nikoliv.

            /* CSS */
.article-summary {
  --has-image: false;
}

@container style(--has-image: true) {
  .article-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

/* HTML (with image) */
<div class="article-summary" style="--has-image: true;">
  <img src="..." alt="..." />
  <div>...
</div>

/* HTML (without image) */
<div class="article-summary" style="--has-image: false;">
  <div>...
</div>

            

              
                Copy
              
            
          

To umožňuje vizuálně přitažlivější a informativnější prezentaci shrnutí článků, což zlepšuje uživatelský zážitek. Všimněte si, že nastavení vlastnosti `--has-image` přímo v HTML není ideální. Lepším přístupem by bylo použít JavaScript k detekci přítomnosti obrázku a dynamickému přidání nebo odebrání třídy (např. `.has-image`) prvku `.article-summary` a následnému nastavení vlastní vlastnosti `--has-image` v rámci CSS pravidla pro třídu `.has-image`.

4. Lokalizované stylování

Pro mezinárodní webové stránky lze container style queries použít k přizpůsobení stylů na základě jazyka nebo regionu. Například můžete chtít použít různé velikosti písma nebo mezery pro jazyky s delším textem.

            /* CSS */
.locale-container {
  --language: en;
}

@container style(--language: ja) {
  .text {
    font-size: 1.1em;
    letter-spacing: 0.05em;
  }
}

@container style(--language: ar) {
  .text {
    direction: rtl;
  }
}

/* HTML */
<div class="locale-container" style="--language: ja;">
  <p class="text">...</p>
</div>

            

              
                Copy
              
            
          

To umožňuje vytvářet lépe přizpůsobené a uživatelsky přívětivější zážitky pro různá jazyková publika. Uvědomte si, že některé jazyky, jako je arabština a hebrejština, se píší zprava doleva a je třeba aplikovat specifické styly. Pro japonštinu a další východoasijské jazyky mohou být zapotřebí jiné mezery a velikost písma pro správné vykreslení znaků.

5. Aspekty přístupnosti

Container style queries mohou také zlepšit přístupnost přizpůsobením stylů komponent na základě preferencí uživatele nebo schopností zařízení. Například můžete zvýšit kontrast komponenty, pokud si uživatel ve svém operačním systému zapnul režim vysokého kontrastu.

            /* CSS */
body {
  --high-contrast: false;
}

@media (prefers-contrast: more) {
  body {
    --high-contrast: true;
  }
}

@container style(--high-contrast: true) {
  .component {
    background-color: black;
    color: white;
  }
}

/* HTML */
<div class="component">...

            

              
                Copy
              
            
          

To zajišťuje, že vaše webové stránky jsou použitelné a přístupné pro všechny, bez ohledu na jejich schopnosti. Všimněte si použití media query `@media (prefers-contrast: more)` k detekci režimu vysokého kontrastu na úrovni operačního systému a následného nastavení vlastní vlastnosti `--high-contrast`. To vám umožní spouštět změny stylu pomocí style query na základě systémového nastavení uživatele.

Osvědčené postupy

• Používejte popisné názvy vlastních vlastností: Vybírejte názvy, které jasně naznačují účel vlastnosti (např. --theme místo --t).
• Udržujte dotazy na styl jednoduché: Vyhněte se složité logice v rámci dotazů na styl, abyste zachovali čitelnost a výkon.
• Začněte s pevným základem: Používejte tradiční CSS a media queries pro základní rozložení a stylování. Container style queries by měly vylepšovat, nikoli nahrazovat, vaše stávající CSS.
• Zvažte výkon: Ačkoli jsou container style queries obecně efektivní, mějte na paměti počet dotazů, které používáte, a složitost stylů, které spouštějí. Jejich nadměrné používání může ovlivnit výkon, zejména на starších zařízeních.
• Důkladně testujte: Testujte své komponenty v různých kontextech a prohlížečích, abyste zajistili jejich správné přizpůsobení.
• Používejte záložní řešení (fallbacks): Poskytněte záložní styly pro prohlížeče, které ještě plně nepodporují container style queries. K podmíněnému použití kódu se style queries lze použít feature queries (@supports).
• Dokumentujte své komponenty: Jasně dokumentujte zamýšlené použití každé komponenty a vlastní vlastnosti, na kterých závisí.
• Zvažte kaskádu: Pamatujte, že kaskáda se stále uplatňuje i v rámci container style queries. Při definování stylů si buďte vědomi specifičnosti a dědičnosti.
• Používejte JavaScript s mírou: Ačkoli můžete použít JavaScript k dynamické změně stylů na kontejneru, snažte se minimalizovat jeho použití. Pro změny stylů se co nejvíce spoléhejte na CSS.

Podpora v prohlížečích

Container style queries mají vynikající podporu v moderních prohlížečích, včetně Chrome, Firefox, Safari a Edge. Starší prohlížeče však tuto funkci nemusí plně podporovat. Ujistěte se, že používáte feature queries k poskytnutí záložních stylů pro tyto prohlížeče nebo použijte polyfill.

Závěr

CSS Container Style Queries nabízejí výkonný a flexibilní přístup k responzivnímu designu, který vám umožňuje vytvářet skutečně komponentově založené a přizpůsobitelné webové stránky a aplikace. Využitím stylování kontejnerových prvků můžete odemknout novou úroveň kontroly a granularity ve svých návrzích, což vede k lépe udržovatelným, škálovatelným a uživatelsky přívětivějším zážitkům pro globální publikum.

Osvojte si container style queries k vytváření responzivních komponent, které se bezproblémově přizpůsobují různým tématům, rozložením, jazykům a požadavkům na přístupnost, a vytvořte tak skutečně globální webový zážitek.

Zdroje

• MDN Web Docs: CSS Container Queries
• CSS Container Style Queries – a First Look
• Container Style Queries Polyfills